<template>
	<view>
		<view class="story_list">
			<view class="story_list_item" v-for="(item,index) in storyList" :key="index" @click="jumpToMusicPlayerPage(index)">
				<image class="story_list_item_image" :src="item.icon" mode="aspectFill"></image>
				<view class="story_list_item_content_back">
					<text class="story_list_item_title"> {{ item.name }} </text>
					<view class="story_list_item_time_view">
						<view class="story_list_item_time"> {{ item.duration }} </view>
						<view v-show="false" class="story_list_item_day"> {{ resolvingDate(item.register_date) }} </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storyList:[],
				currentPage: 0,
			};
		},
		onLoad() {
			/* 设置导航条 */
			this.setNavigationBar();
			/* 请求数据列表 */
			this.requestStoryList();
		},
		onPullDownRefresh() {
			this.currentPage = 0;
			this.storyList = [];
			this.requestStoryList();
		},
		onReachBottom:function(){
			this.currentPage = this.currentPage + 1;
			this.requestStoryList();
		},
		methods: {
			/* 设置导航条 */
			setNavigationBar() {
				uni.setNavigationBarTitle({
					title:"助眠故事"
				});
			},
			/* 请求数据列表 */
			requestStoryList() {
				uni.showLoading({
					title:"数据加载中"
				});
				var that = this;
				this.$api.requestStoryListWithModelData({type: "1",page: this.currentPage}).then((res)=>{
					uni.hideLoading();
					uni.stopPullDownRefresh();
					that.storyList = that.storyList.concat(res.data);
				}).catch((error)=>{
					uni.hideLoading();
					uni.stopPullDownRefresh();
					uni.showModal({
					    title: '提示',
						content: '数据加载失败',
						confirmText: '重试',
						confirmColor: '#FF4040',
					    success: function (res) {
					        if (res.confirm) {
								that.requestMusicData();
					        }
					    }
					});
				});
			},
			/* 跳转到音频播放页 */
			jumpToMusicPlayerPage(index) {
				var that = this;
				var playerArray = this.storyList.map((item)=>{
					var newItem = new Object();
					newItem.title = item.name;
					newItem.music = item.music;
					newItem.icon = item.icon;
					newItem.type = "电台故事"; 
					newItem.from = "storylist";
					return newItem;
				});
				var itemsString = JSON.stringify(playerArray);
				uni.navigateTo({
					url:"../playerModel/musicplayer/musicplayer?items=" + itemsString + "&index=" + index
				});
			},
			/* 时间戳转换为时间字符串 */
			resolvingDate(date){
				if(!date){
					return;
				}
				//date是传入的时间
				let d = new Date(date);
			
				let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
				let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
			
				let times;
					times=d.getFullYear() + '-' + month + '-' + day;
				return times
			},
			
			
		}
	}
</script>

<style lang="scss">
	.story_list {
		
	}
	
	.story_list_item {
		width: 100%;
		display: flex;
	}
	
	.story_list_item_image {
		width: 200rpx;
		height: 112.5rpx;
		border-radius: 10rpx;
		margin: 20rpx 0rpx 20rpx 40rpx;
		flex-shrink: 0;
	}

	.story_list_item_content_back {
		margin: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.story_list_item_title {
		font-size: 30rpx;
		color: #FFFFFF;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.story_list_item_time_view {
		display: flex;
		justify-content: space-between;
		width: 450rpx;
	}
	
	.story_list_item_time {
		font-size: 24rpx;
		color: $uni-text-color-grey;
	}
	
	.story_list_item_day {
		font-size: 24rpx;
		color: $uni-text-color-grey;
	}


</style>
